Craiglist Website - Redesign

design Figma ui design UI/UX user interface ux/ui Website

Project Description

This project aims to redesign the Craiglist website interface known for presenting a high volume of different information to the user while having an interface with an outdated design.

Benchmark

In the section below, we start our project (this time in a team composed of 4 members), analyzing websites that present similar proposals and on which we can base our future design decisions. Each of them has positives and negatives to consider.

Benchmark Success Statement

The success of any interface resides on helping the user to accomplish his/her objective or task as simple and as quick as possible.

Cards Sort Activity

In this activity we name different features or objectives that you can find on the proposed website, without presenting the name of the website to the user. The person performing this test is then asked to sort the named cards into different piles freely according to the personal judgment he exercises.

If a pile contains more than 10 cards, the individual is asked to break that pile into a smaller number of cards and label that pile as well. Each stack should contain its own unique label at the end of this activity.

Each member of the group performed the same procedure with different users. Such a test allowed us to collect a greater amount of information allowing us to analyze in more detail the impressions and categories defined by users in general for a site that has the characteristics that Craiglist has.

With this test we noticed the following pattern of categories:

. Buy
. Sell
. Hire
. Free
. Volunteer
. Legal Services
. Forums/Community
. Social
. Website Policies

. Events

Analysis

Analyzing the data collected and the pattern found in them, it was possible to notice that two areas were very clear to the user: Purchase and Sale. In addition to allowing us to visualize the creation of a page that would add some of the areas that are scattered today such as Hiring, Jobs and Events. This allowed us to better structure the different areas contained in the site and better plan the future design that would be implemented.

Sketches

Wireframes

This wireframe helped me define some important design points for this project. Helping me to visualize in a clearer and more detailed way the different areas and categories that the site will have. Thus allowing initial design decisions to be made.